<!DOCTYPE html>

<!--
   Copyright 2014 Google Inc. All rights reserved.

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
-->

<html>
<head>
<meta charset="UTF-8">
<title>IO Schedule updater</title>
<link rel="stylesheet" type="text/css" href="index.css"></link>
<style type="text/css">
.body {
  background-color: #dddddd;
}
.app {
 background-color: white;
 box-shadow: 2px 2px 5px rgb(168,168,168);
 margin: 40px auto;
 width: 50%;
 max-width: 800px;
 padding: 40px;
}
.proceed.green:hover {
  background: rgb(0, 107, 17);
}
.proceed.green {
  cursor: pointer;
  background: rgb(0, 160, 25);
  color: white;
}
.proceed {
-webkit-transition: 0.3s all;
margin: 20px auto;
width: 100px;
height: 100px;
border-radius: 50px;
background: rgb(202, 0, 0);
border-color: black;
box-shadow: 5px 5px 15px black;
vertical-align: middle;
text-align: center;
line-height: 100px;
color: transparent;
font-weight: bold;
}
.warning {
  margin: 60px;
}

.waiting .proceed {
  display: none;
}
.waiting .circle {
  display: block;
}

.circle{
    display: none;
    position:relative;
    margin:80px auto;
    width:80px;
    height:80px;
    background:#ecf0f1;
    border:solid 5px #2c3e50;
    border-radius:100%;
    overflow:hidden;
    animation: rotates 2s infinite linear;
    -webkit-animation: rotates 2s infinite linear;
}
.up{
    width: 30px;
    height: 40px;
    left:25px;
    overflow:hidden;
    background:#cef;
    position:absolute;
}
.up:before,.up:after{
    content:"";
    width:30px;height:30px;
    background:#ecf0f1;
    position:absolute;
    z-index:1;
}
.up:before{
    top:30px;
    left:-17px;
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
}
.up:after{
    top:30px; left:17px;
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
}
.innera{
    position:relative;
    top:15px;
    width:30px;height:30px;
    background:#f1c40f;
    animation: mymove 2s infinite linear;
    -webkit-animation: mymove 2s infinite linear;
}
.down{
    width: 30px;
    height: 40px;
    left:25px;
    top:40px;
    overflow:hidden;
    background:#cef;
    position:absolute;
    z-index:1;
}
.down:before,.down:after{
    content:"";
    width:30px;
    height:40px;
    background:#ecf0f1;
    position:absolute;
    z-index:1;
}
.down:before{
    top:-25px;
    left:-17px;
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
}
.down:after{
    top:-25px;
    left:24px;
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
}
.innerb{
    position:relative;
    top:40px;
    width:30px;height:30px; background:#f1c40f;
    animation: mymoveb 2s infinite linear;
    -webkit-animation: mymoveb 2s infinite linear;
}
@keyframes mymove{
    0%{top:15px;}
    100%{top:45px;}
}
@keyframes mymoveb{
    0%{top:40px;}
    90%{top:20px;}
    100%{top:-5px;}
}
@keyframes rotates{
    0%{transform:rotate(0deg);}
    80%{transform:rotate(0deg);}
    100%{transform:rotate(180deg);}
}
@-webkit-keyframes mymove{
    0%{top:15px;}
    100%{top:45px;}
}
@-webkit-keyframes mymoveb{
    0%{top:40px;}
    90%{top:20px;}
    100%{top:-5px;}
}
@-webkit-keyframes rotates{
    0%{-webkit-transform:rotate(0deg);}
    80%{-webkit-transform:rotate(0deg);}
    100%{-webkit-transform:rotate(180deg);}
}
</style>
</head>
<body>
<form action="/admin/schedule/cmsupdate" method="post">
<div class="app">
  <div>
    <input type="checkbox" name="user_confirmation">
    I understand that proceeding will update the public Android app with CURRENT data from CMS.
  </div>
  <div class="warning">If you want to see the data that will be saved BEFORE proceeding, click <a href="/cmsupdate?show=true" target="_blank">here</a></div> 
  <div class="warning">
  Warning: your email address will be sent to the project admins, along with audit data, like
  the current time and the number of entities sync'ed. If you are not ok with this, don't proceed!
  </div>  
  <div class="proceed">Proceed</div>
  <div class="circle">
    <div class="up">
        <div class="innera"></div>
    </div>
    <div class="down">
        <div class="innerb"></div>
    </div>
  </div>
</div>
</form>
</body>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    
    var form=document.querySelector('form');
    var proceed=document.querySelector('.proceed');
    var accept=document.querySelector('input[type="checkbox"]');
    accept.addEventListener('click', function(e) {
      if (e.target.checked) {
        proceed.classList.add('green');
      } else {
        proceed.classList.remove('green');
      }
    });
    
    proceed.addEventListener('click', function(e) {
      if (accept.checked) {
        document.body.classList.add('waiting');
        form.submit();
      }
    });
  });
</script>
</html>
